﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImgZoomDlg.ascx.cs"
    Inherits="Imageo.ImgZoomDlg" %>
<asp:Panel ID="pnlImageControl" runat="server" Width="100%" Height="100%" Style="text-align: left;
    vertical-align: middle; font: 14px/14px Arial, Helvetica, sans-serif;">
    
    <script type="text/javascript">
        $(document).ready(function() {
//            $('#<%=hdfSimilarTrails.ClientID %>').button();
//            $('#<%=hdfSimilarImages.ClientID %>').button();
        });

        function ZoomImage(sender) {
            if (sender) {
                var rootName = sender.id;
                var dialogName = rootName.replace("_btnZoomImage", "_dialogZoomImage");
                var titleName = rootName.replace("_btnZoomImage", "_hdfTitle");
                var title = $("#" + titleName).val();

                $("#" + dialogName).dialog({
                    resizable: false,
                    title: title,
                    height: $(window).height() - 150,
                    width: $(window).width() - 150,
                    modal: true,
                    buttons: null
                });
            }
        }
    </script>
    <asp:HiddenField ID="hdfTitle" runat="server" />     
    <asp:HiddenField ID="hdfSimilarTrails" runat="server" />     
    <asp:HiddenField ID="hdfSimilarImages" runat="server" />

    <div runat="server" id="dialogZoomImage" title="Image" style="display: none;">
    <%-- 
        <div id="div2" runat="server" style="width: 100%; height: 100%; background-color: Black; vertical-align: middle; text-align: center; vertical-align: middle;">
    --%>
        <div id="div2" runat="server" style="width: 100%; height: 100%; vertical-align: middle; text-align: center; vertical-align: middle;">
            <a id="A1" runat="server" href="">
                <asp:Image runat="server" ID="imgImage2" ImageUrl="~/images/photo_not_available.jpg" Style="max-width: 100%; max-height: 100%;" />
            </a>
        </div>
    </div>
         
    <div id="div1" runat="server" style="width: 100%; height: 100%; background-color: Black; vertical-align: middle; text-align: center;">
    <%-- 
    <div id="div1" runat="server" style="width: 100%; height: 100%; vertical-align: middle; text-align: center;">
    --%>
        <a id="lnkTrailUrl" runat="server" href="">
            <asp:Image runat="server" ID="imgImage" ImageUrl="~/images/photo_not_available.jpg" Style="max-width: 100%; max-height: 100%;" />
            <asp:ImageButton runat="server" ID="btnZoomImage" ImageUrl="~/images/zoom.png" Width="20" Height="20" style="margin-left: -20px;" OnClientClick='ZoomImage(this); return false;' />
        </a>
    </div>
    <div id="divPicCommands" runat="server" style="text-align:center" >
        <a id="lnkSimilarTrails" runat="server" href="" class="blueSmallTitle">
        Similar Trails</a>
        <a id="lnkSimilarImages" runat="server" href="" class="blueSmallTitle">
        Similar Images</a>
        <%-- 
        <button id="btnSimilarTrails" runat="server" onclick="dialogAddPhoto(); return false;">Similar Trails</button>
        <button id="btnSimilarImages" runat="server" onclick="dialogDeletePhoto(); return false; ">Similar Images</button>  
        --%>
    </div>
</asp:Panel>
